import React from 'react';
import tools from '../../common/tools';

class SaveChart extends React.Component {
    constructor(props){
        super();
        this.control=null;
        this.state={
                        id:'',
                        name:'',
                        desc:'',
                        data:''
                    };
        this.btns=[
            {name:'取消', evt:'cancel'},
            {name:'保存', evt:'save'}
        ];
        if(props.control!=undefined){
            this.initControl(props.control);
        }
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    initControl(hooks){
        let that=this;
        this.control=hooks;
        this.control.addHook('show',function(data){
            let params=data.params;
            if(params!=undefined){
                that.setState(params.state);
            }
            $('#g_chartconfigbox').modal('show');
        });
        this.control.addHook('hide',function(){
            $('#g_chartconfigbox').modal('hide');
        });
    }
    render(){
        let that=this;
        return (
            <div id="g_chartconfigbox" className="modal fade" style={{display:"none"}} >
                <div className="modal-dialog">
                    <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 className="modal-title">保存图表部件</h4>
                    </div>
                    <div className="modal-body">
                        <form className="form-horizontal">
                            <input type="hidden" readOnly="readOnly" className="form-control" data-id="id" value={this.state.id}/>
                            <div className="form-group">
                                <label for="db_ip" className="col-sm-2 control-label">部件名称</label>
                                <div className="col-sm-10">
                                <input type="text" className="form-control" data-id="name" placeholder="请输部件名称" value={this.state.name} onChange={this.handleChange}/>
                                </div>
                            </div>
                            <div className="form-group">
                                <label for="db_port" className="col-sm-2 control-label">部件说明</label>
                                <div className="col-sm-10">
                                <input type="text" className="form-control" data-id="desc" placeholder="请输部件说明" value={this.state.desc} onChange={this.handleChange}/>
                                </div>
                            </div>
                            <input type="hidden" readOnly="readOnly" className="form-control" data-id="data" value={this.state.data}/>
                        </form>
                    </div>
                    <div className="modal-footer">
                        {
                            this.btns.map(e=>{
                                let cls=tools.getBtnCls(e.evt);
                                return <button type="button" className={cls} key={e.evt} data-evt={e.evt} onClick={that.handleClick} >{e.name}</button>
                            })
                        }
                    </div>
                    </div>
                </div>
            </div>
        );
    }
    handleClick(e){
        let that=this;
        let evt=e.target.getAttribute('data-evt');
        if(this.control!==null&&evt==='save'){
            this.control.dispatch('callback',{
                evt:'savechart',
                data:this.state
            });
        }
        if(evt!=='test'){
            that.control.dispatch('hide');
        }
    }
    handleChange(e){
        let that=this;
        let key=e.target.getAttribute('data-id');
        let filed={};
        filed[key]=e.target.value;
        this.setState(filed);
    }
}

export default SaveChart;